import { useEffect, useState } from 'react'
import { Table, Button, message, Space, Image, Tag, Modal, Radio, Input } from 'antd'

import styles from './style.module.scss'
import { AdminService } from '../../services'
import Link from 'next/link'
import Search from 'antd/lib/input/Search'

const { Column } = Table

const pageSize = 10

export default function Books() {

  const [books, setBooks] = useState<AdminService.Book[]>([])
  const [text, setText] = useState('')
  const [total, setToal] = useState<number>(0)
  const [pageIndex, setPageIndex] = useState<number>(1)

  const [putaway, setPutaway] = useState<boolean>(true)
  const [modal, setModal] = useState<boolean>(false)
  const [comment, setComment] = useState('')
  const [bookId, setBookId] = useState('')

  async function getdata(skip: number) {
    let res = await AdminService.booklist(skip, pageSize)
    if (res.stat === 'OK') {
      setBooks(res.data.list)
      setToal(res.data.total)
    } else {
      message.error(res.msg)
    }
  }

  async function onOK() {
    const res = await AdminService.judgebook(bookId, putaway, comment)
    if (res.stat === 'OK') {
      message.success('审核成功')
      getdata(pageIndex - 1)
    } else {
      message.error(res.msg)
    }
  }

  function onCancel() {
    setModal(false)
    setPutaway(false)
    setComment('')
    setBookId('')
  }

  async function goSearch(skip: number) {
    const res = await AdminService.booklist(skip, pageSize, text)
    if (res.stat === 'OK') {
      setBooks(res.data.list)
      setToal(res.data.total)
    } else {
      message.error(res.msg)
    }
  }

  useEffect(() => {
    getdata(0)
  }, [])

  return (
    <div className={styles.wrap}>
      <div className={styles.search} >
        <Search
          placeholder="搜索书籍"
          allowClear
          enterButton="搜索"
          size="large"
          value={text}
          onChange={v => setText(v.target.value)}
          onSearch={async () => goSearch(0)}
          onPressEnter={async () => goSearch(0)}
        />
        <Button onClick={() => {
          setText('')
          getdata(0)
        }} size='large'>重置</Button>
      </div>
      <Table
        dataSource={books}
        rowKey="_id"
        pagination={{
          pageSize: pageSize,
          current: pageIndex,
          total: total,
          showSizeChanger: false,
          onChange: async (v) => {
            setPageIndex(v)
            if (text === '') getdata((v - 1) * 10)
            else goSearch((v - 1) * 10)
          }
        }}
      >
        <Column title="封面" dataIndex="banner" key="_id"
          width={120}
          render={(banner: string[]) => <Space >{banner.map(v => <Image key={v} alt='' width={100} src={v} />)}</Space>}
        />
        <Column title="标题" dataIndex="title" key="_id" />
        <Column title="价格" dataIndex="lowprice" key="_id"
          render={v => <>￥{v}</>}
        />
        <Column title="库存" dataIndex="allstock" key="_id" />
        <Column title="状态" dataIndex="putaway" key="_id"
          render={v => {
            return v ? <Tag color="success">上架</Tag> : <Tag color='warning'>下架</Tag>
          }}
        />
        <Column title="状态" dataIndex="judger" key="_id"
          render={v => {
            return v ? <Tag color="success">已审核</Tag> : <Tag color='warning'>未审核</Tag>
          }}
        />
        <Column
          title="操作"
          key="_id"
          render={(text, record: AdminService.Book) => {
            return (
              <Space>
                <Link href={'/goods/' + record._id} passHref>
                  <Button
                    size="small"
                    type="primary"
                  >
                    查看
                  </Button>
                </Link>
                <Button
                  onClick={() => {
                    setBookId(record._id)
                    setModal(true)
                  }}
                  size='small'
                  type='default'
                >审核</Button>
              </Space>
            )
          }}
        />
      </Table>
      <Modal
        title="商品审核"
        visible={modal}
        onOk={onOK}
        onCancel={onCancel}
        okText="审核"
        cancelText='取消'
      >
        <div className={styles.audit}>
          <span className={styles.label}>审核：</span>
          <Radio.Group
            options={[
              { value: true, label: '上架' },
              { value: false, label: '下架' }
            ]}
            onChange={e => setPutaway(e.target.value)}
            value={putaway}
            optionType="button"
          />
        </div>
        <br />
        <div className={styles.audit}>
          <span className={styles.label}>备注：</span>
          <Input value={comment} onChange={v => setComment(v.target.value)} />
        </div>
      </Modal>
    </div>
  )
}
